<template>
    <div class="list">
        <!-- 筛选数据的下拉菜单 -->
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>

        <!-- 商品列表 -->
        <!-- <list-product :requestApi="getListByBrandAndCategory" :category="(route.query.category as string).trim()"
            :brand="(route.query.brand as string).trim()" @click-item="handleClickItem">
            <template #price="scope">
                <span style="color: #f00;">￥{{ scope.price }}</span>
            </template>
        </list-product> -->
        <van-swipe-cell v-for="prod in recommendList" :key="prod.id">
            <van-card :price="prod.price" :title="prod.title" :origin-price="prod.originPrice" class="goods-card"
                @click="handleClickItem">
                <template #thumb>
                    <div class="van-image" style="width: 80%; height: 100%;">
                        <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
                    </div>
                </template>
                <template #tags>
                    <van-tag plain type="primary">仅剩:</van-tag>
                    <van-tag plain type="primary" class="num">{{ prod.saleNum }}</van-tag>
                </template>
                <template #footer>
                    <van-button round type="success" class="btn" @click="handelAddToCart(prod)">★购物车</van-button>
                </template>
            </van-card>
        </van-swipe-cell>


    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { getListByBrandAndCategory } from '@/api/category'
import useCartStore from '@/store/cart';
import { showToast } from 'vant';

const store = useCartStore()

const route = useRoute()

const recommendList = ref<Product[]>([])

// 下拉栏
const value1 = ref(0);
const value2 = ref('a');
const option1 = [
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 },
];
const option2 = [
    { text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
];


// const get = (id: any) => {
//     console.log(id)
// }
// get(route.query.id)

const onLoad = async () => {
    const result: any = await getListByBrandAndCategory(route.query.id)
    console.log("商列：", result)
    //商品数据
    recommendList.value = result.list
}
onLoad()




const handleClickItem = () => {
    console.log('你点击了商品项：');
    // 详情...

}


// 加入购物车
const handelAddToCart = (prod: any) => {
    console.log('---加入购物车---')
    const currProd: CartProduct = {
        id: prod.id,
        title: prod.title,
        image: prod.image,
        originPrice: prod.originPrice,
        price: prod.price,
        couponValue: prod.couponValue,
    }
    console.log('当前选购商品', currProd)
    // 加入购车，保存到 store 中 
    store.addToCart(currProd)
    showToast({
        type: 'success',
        message: '加入购物车成功',
        duration: 1000,
    })
}
</script>

<style lang="less" scoped>
.num {
    color: red;
    font-weight: bold;
}

.btn {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 80px;
    height: 32px;
    font-size: 12px;
    background-color: orangered;
    border-color: orangered;
}
</style>
